<template>
	<uni-popup ref="paymentVoucher_pop">
		<view class="paymentVoucher_pop">
			<text class="zhifu_title">上传支付证明</text>
			<image class="close" @click="close()" src="/static/my/close.png"></image>
			<view class="black_1">收付款信息平台将加密处理，请放心添加</view>
			<view class="black_2">请勿上传非相关凭证，否则可能导致封号</view>
			<view class="black_3">
				<view class="text1">
					支付凭证
				</view>
				<image class="rgiht" @click="uplaod" :src="images"></image>
				
			</view>
			
			<view class="black_4">
				
			</view>
			
			<view class="black_5" @click="sumbit()">
				提交转账截图
			</view>
			<view class="black_6">(如遇上传失败，请直接点击提交)</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {

		props: {
			success: {
				type: Function,
			},
			add: {
				type: Function,
			}
		},
		name: "paymentVoucher",
		data() {
			return {
				type: 0,
				images: '../../static/my/add_tu.png'
			};
		},
		methods: {

			open() {
				this.$refs.paymentVoucher_pop.open('bottom')

			},
			close() {
				this.$refs.paymentVoucher_pop.close()
			},
			uplaod() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => { 
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.http.upload(tempFilePaths[0], {}, res => {
							that.images = 'http://zygq.opo5.com' + res.data
						})

					}
				});
			},
			sumbit(){
				if(this.images == '../../static/my/add_tu.png'){
					this.custom.tool.showToast("请上传截图")
					return
				}
				this.close()
				this.success(this.images)
				
			}
		}
	}
</script>

<style scoped lang="less">
	
	.paymentVoucher_pop{
		background: #FFFFFF;
		padding: 10px 0px 100px 0px;
		border-radius: 28rpx 28rpx 0px 0px;
		text-align: center;
		// padding: 10px;
		.zhifu_title{
			font-size: 32rpx;
			font-weight: 800;
			color: #2A2A2A;
		}
		.close{
			position: absolute;
			right: 10px;
			width: 30px;
			height: 30px;
		}
		.black_1{
			margin: 10px 0px;
			font-size: 28rpx;
			font-weight: 400;
			color: #FE903D;	
			padding: 10px;
			
			background: #FFFBC8;
		}
		.black_2{
				margin: 10px 0px;
			font-size: 28rpx;
			font-weight: 400;
			color: #ACACAC;
		}
		
		.black_3{
			margin: 20px 10px;
			display: flex;
			align-items: center;
			.rgiht{
				width: 60px;
				height: 60px;
				margin-left: 10px;
			}
		}
		.black_4{
			height: 1px;
border-bottom: 1rpx solid #ECECEC;
		}
		
		.black_5{
			padding: 15px;
			margin: 20px 10px;
			background: #FE903D;
			border-radius: 14rpx;
			font-size: 35rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		.black_6{
			padding: 0px 10px 60px 10px;
			font-size: 28rpx;
			font-weight: 400;
			color: #FF5858;
		}
		
	}
</style>